<template>
	<view class="wrap" :style="getBg">
		<image class="poster" :src="poster" mode="heightFix"></image>
		<xlcanvas v-if="isReady" :param="diyData" @fail="fail" @success="success">
		</xlcanvas>
	</view>
</template>

<script>

	import xlcanvas from '@/components/muu-canvas/canvas.vue'
	export default {
		components: {
			xlcanvas,
		},
		props: {
			app: '',
			data: {
				type: Object,
				default: () => {}
			},
			qrcode: {
				type: String,
				default: ""
			},
			userInfo:{},
			config:{},
		},
		data() {
			return {
				isReady: false,
				diyData: {},
				poster: "",
				loading:true
			};
		},
		created() {
			let system = uni.getSystemInfoSync();
			this.height = system.windowHeight * 2;
			this.width = system.windowWidth * 2;
		},
		computed:{
			getBg(){
				return {background:`url(${this.util.rootUrl() + '/addons/' + this.app + '/resource/images/share/4-dots.png'}) 0 10px / 100% repeat-y`}
			}
		},
		methods: {
			draw(redraw){
				if(redraw){
					this.isReady = false;
					this.loading = true;
				}
				if(!this.isReady){
					this.diyData = this.getParam();
					this.isReady = true;
				}
			},
			getParam() {
				let w = 750,
					h = 1206,
					userInfo = this.userInfo,
					config = this.config,
					data = this.data;
				let avatar = userInfo.memberInfo.avatar ? userInfo.memberInfo.avatar : this.util.rootUrl() + '/addons/' + this.app + '/resource/images/avatar@2x.png'
				uni.getImageInfo({
					src: avatar,
					fail: (res)=>{
						console.log(res)
						avatar = this.util.rootUrl() + '/addons/' + this.app + '/resource/images/avatar@2x.png'
					}
				})
				let pw = 137;
				return {
					width: w,
					height: h,
					bgColor: '#FFFFFF',
					paths: {
						rect: [
							// 用户头像
							{x: 433, y: 294, w: 64, h: 64, r:32, type: "fill", color: "#FFDC00"},
						]
					},
					pics: [
						{x: 0, y: 0, w: w, h: h, preload: true, src: this.util.rootUrl() + '/addons/' + this.app + '/resource/images/share/4-bg.png'},
						{x: 170, y: 149, w: 380, h: 285, r: 7, preload: true, src: data.cover_400},
						{x: 446, y: 277, w: 36, h: 22, src: this.util.rootUrl() + '/addons/' + this.app + '/resource/images/crown@2x.png'},
						{x: 435, y: 296, w: 60, h: 60, r: 30, src: avatar},//用户头像
						{x: 463, y: 786, w: 152, h: 152,r: 15, src: this.qrcode},
					],
					texts: [
						//信息
						//{w:470, x: 140, y: 424, font: 36, multiple:true, clamp:2, color: "#000000",align: "center", text: data.title},

						{x: 137, y: 608, w:475, font: 26,multiple:true,lineHeight:40,clamp:3, color: "#000000", text: data.description},
						
						//公众号信息及分享码
						{x: 137, y: 824, w:315, font: 26,multiple:true,clamp:1, color: "#000000", text: config.title ? config.title : 'MuuCmf开发框架'},
						{x: 137, y: 864, w:315, font: 24,multiple:true,clamp:1, color: "#605D2F", text: config.copyright.title ? config.copyright.title : '北京火木科技有限公司'},
					],
				};  
			},
			fail(e) {
				//console.log(e);
				uni.showModal({
					title: '错误提示',
					content: e.tips + e.err.err,
					showCancel: false,
					success: function (res) {
						
					}
				});
				this.isReady = false;
				this.loading = false;
				uni.hideLoading();
			},
			success(e) {
				this.poster = e.res.tempFilePath;
				uni.hideLoading();
				this.loading = false;
				this.$emit('callbackPoster',{
					current:3,
					src:this.poster
				})
			},
		}

	}
</script>

<style lang="scss">
	.wrap{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.poster{
			height: 70vh;
			box-shadow: 10px 8px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			border-radius: 20rpx;
			margin-bottom: 194rpx;
		}
	}
</style>
